表单验证之jquery篇

验证代码：

function valid(form, validateArray){
        var fnArray = [];
        $.each(validateArray, function(i, item){
            var input = $(form[item.name]);
            var errMsg = input.parent().find(".err-tip");
            function fn(){
                var val = input.val();
                if(item.requireMsg && (val == '' || val == input.attr("placeholder"))){
                    errMsg.html(item.requireMsg);
                    return false;
                }

                if(item.reg && !item.reg.test(val)){
                    errMsg.html(item.regMsg);
                    return false;
                }

                return true;
            }
            fnArray.push(fn);
            input.on("blur", function(){
                fn();
            });
        });

        $(form).on("submit", function(){
            var ok = true;
            $.each(fnArray, function(i,fn){
                var res = fn();
                if(!res){
                    ok = res;
                }
            });

            return ok;
        });
    }

js使用方式：

var validateArray = [
    {
        name: "uname",
        requireMsg: "申请人姓名不为空"
    },
    {
        name: "uidcard",
        requireMsg: "身份证号码不为空",
        reg: /(^\d{15}$)|(^\d{17}([0-9]|X)$)/,
        regMsg: "请输入正确的身份证号"
    }
];
valid($("#feedbackform")[0], validateArray);

总结：
这样写验证代码，有一个比较大的好处就是：所有的验证都用同一个函数实现，可复用性强，并且下次再写同样的验证，只需要在validateArray数组里面添加对应的验证规则即可。